<template>
  <div v-loading="loading"
       element-loading-text="新闻资讯加载中...">
    <div>
      <div v-if="childRouteData.length" style="background: #fff;height: 50px;display: flex;align-items: center;justify-content: center;
    box-sizing:border-box;position:relative;"
      >
        <div v-for="item in childRouteData" style="padding: 0 20px;color: #ceb493;font-size: 14px;cursor: pointer;
      position: relative"
             :id="item.name" @mouseenter="enterHover(item)"
             @mouseleave="leaveHover(item)"
        >
          <span :class="[item.isHover ? 'element-text' : '']"
                :style="{color:item.isHover ? '#000' : '#ceb493'}"
                @click="toPathUrl(item)">{{item.name}}</span>
        </div>

        <div style="height: 1px;width: 100%;border: 1px solid #041850;position: absolute;bottom: 0" v-if="isBorder"></div>
      </div>
      <nuxt-page></nuxt-page>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { useRouter,useRoute } from 'vue-router'
  import { screenStore } from '~/stores/modules/screen'
  import gsap from 'gsap'
  const router = useRouter()
  const route = useRoute()
  const scrStore = screenStore()
  const sideImage = ref([])
  const childRouteData = ref([])
  const loading = ref(false)
  const isBorder = ref(false)
  let prentId = ''
  onMounted(() => {
    const ind = scrStore.guanwangPage.findIndex(item => item.path == route.path)
    prentId = ind
    if(ind != -1){
      childRouteData.value = scrStore.guanwangPage[ind].tableData.filter(item => item.hidden == true)
      if(childRouteData.value.length){
        scrStore.guanwangPage[ind].tableData[0].isHover = true
        isBorder.value = true
        const path = scrStore.guanwangPage[ind].path + scrStore.guanwangPage[ind].tableData[0].path
        router.push({path:path,query:{name:scrStore.guanwangPage[ind].tableData[0].name,prentInd:ind}})
      }
    }
  })
  function toPathUrl(row){
    childRouteData.value.forEach(item => {
      item.isHover = false
    })
    const path = scrStore.guanwangPage[prentId].path + row.path
    row.isHover = true
    isBorder.value = true
    router.push({path:path,query:{name:row.name,prentInd:prentId}})
  }
  const enterHover = (row) => {
    childRouteData.value.forEach(item => {
      item.isHover = false
    })
    isBorder.value = false
    row.isHover = true
    isBorder.value = true
  }
  const leaveHover = () => {
    childRouteData.value.forEach(item => {
      if(route.path.includes(item.path)){
        item.isHover = true
      }
      else{
        item.isHover = false
      }
    })
    isBorder.value = true
  }
</script>

<style scoped lang="less">

  .element-text::after {
    content: ''; /* 伪元素必须设置content */
    position: absolute; /* 绝对定位 */
    left: 43%;
    bottom: -13px;
    border-width: 0 8px 10px 8px; /* 控制三角形大小和方向 */
    border-style: solid;
    border-color: transparent transparent #041850 transparent; /* 控制三角形颜色 */
  }
</style>
